<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue版文字跑马灯案例</title>
</head>
<body>
  <div id="app">
    <h4 v-text="msg"></h4>
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
  </div>
</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '猥琐发育，别浪~~~~~~~~!',
      timerID: null
    },
    methods: {
      start(){
        console.log('跑马灯start');
        // 如果定时器没有结束就不能再开启
        if (this.timerID != null) {
          return ;
        }
        this.timerID = setInterval(() => {
          let startChar = this.msg.substring(0, 1);
          let endSubString = this.msg.substring(1);
          this.msg = endSubString + startChar;
        }, 400);
        // 启动一个定时器 
      },
      stop(){
        console.log('跑马灯end');
        // 停止定时器
        clearInterval(this.timerID);
        this.timerID = null;
      }
    },
  })

  // 分析：
  /**
   * 1. 将文字信息 浪起来 一个按钮 点击这个按钮 触发事件
   * 2. 事件处理：拿到msg，然后调用  String 的substring 来进行字符串截取操作，把出去的字符截取出来，
   * 放到最后一个位置即可；
   * 猥琐发育，别浪~~~~~~~~!
   * 琐发育，别浪~~~~~~~~!猥
   * 发育，别浪~~~~~~~~!猥琐
   * 育，别浪~~~~~~~~!猥琐发
   * ，别浪~~~~~~~~!猥琐发育
   * 3. 定时器 重复 第二步的操作一个个的截取
   * 
  */
</script>
</html>